<template>
	<view class="user-box" v-if="Object.keys(userInfo).length > 0">
		<view>
			<view class="user-name">Hi，{{ userInfo.surname + userInfo.name }}</view>
			<view class="welcome-text">welcome back！</view>
		</view>
		<view class="edit-text" @click="toEdit">编辑资料</view>
	</view>
	<view class="top" v-else>
		<view class="page-title">WELCOME</view>
		<text class="login-text" @click="login">登录注册</text>
		<view class="desc">
			欢迎来到尧君优选，注册并开启您的尧君优选之旅，我们为您精选了很多商品
		</view>
	</view>
	<view class="tool-box">
		<MenuItem v-for="item in menu" :key="item.name" :info="item" />
	</view>
	<FllowAccount />
</template>

<script setup>
	import MenuItem from '@/components/MenuItem.vue';
	import FllowAccount from '@/components/FllowAccount.vue';
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import Store from '@/store/index.js';
	import {
		getToken
	} from '@/utils/auth';
	import Utils from '@/utils/common.js';

	const userInfo = ref({})
	const menu = ref([{
			name: '我的订单',
			icon: '&#xe719;',
			page: '/subPackages/order/list'
		},
		{
			name: '地址管理',
			icon: '&#xe60a;',
			page: '/subPackages/mine/address/list'
		},
		{
			name: '我的收藏',
			icon: '&#xe8b9; ',
			page: ''
		},
		{
			name: '在线客服',
			icon: '&#xe600;',
			page: ''
		}
	])

	onShow(() => {
		uni.login({
			success: (logRes) => {
				Store.dispatch('Login', logRes.code).then(signed => {
					if (!signed) {
						userInfo.value = {}
						uni.navigateTo({
							url: '/pages/sign'
						})
						return
					}
					userInfo.value = Store.getters.userInfo
				})
			}
		})
	})

	const toEdit = () => {
		uni.navigateTo({
			url: '/subPackages/mine/edit'
		})
	}

	const login = () => {
		uni.navigateTo({
			url: '/pages/sign'
		})
	}
</script>

<style lang="scss">
	.user-box {
		margin: 120px 26px 56px 26px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user-name {
			font-size: 28px;
			font-weight: bolder;
			letter-spacing: 2px;
		}

		.welcome-text {
			font-size: 16px;
			margin-top: 16px;
			font-weight: 300;
		}

		.edit-text {
			font-size: 12px;
			font-weight: bolder;
			position: relative;

			&::after {
				content: '';
				display: inline-block;
				width: 50px;
				height: 1px;
				background-color: #000;
				position: absolute;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.top {
		text-align: center;
		margin-top: 120px;
		margin-bottom: 40px;

		.page-title {
			font-size: 30px;
			font-weight: bolder;
			letter-spacing: 2px;
			margin-bottom: 20px;
		}

		.login-text {
			font-size: 14px;
			font-weight: bolder;
			position: relative;

			&::after {
				position: absolute;
				content: '';
				display: inline-block;
				width: 60px;
				height: 1px;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
				background-color: #000;
			}

		}

		.desc {
			padding: 30px 60px;
			font-size: 12px;
			line-height: 18px;
		}
	}


	.tool-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		padding: 0 26px;
	}
</style>